<template>
  <div id="content">
    <vue-particles
      :particle-opacity="0.7"
      :particles-number="60"
      :particle-size="4"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="2"
      :hover-effect="true"
      :click-effect="true"
      color="#fff"
      shape-type="circle"
      lines-color="#fff"
      hover-mode="grab"
      click-mode="push"
      class="particles"
    />
    <div class="mack_box"/>

    <div id="wx_reg" class="login_box">

      <img class="login_img" src="./s1.png" alt="">

      <div class="login_main">

        <p class="main_text1">Jack抢券活动后台</p>
        <p class="main_text2">一款智能AI服务系统，提供企业完善的营销内容管理</p>

        <div class="input_box1">
          <img class="uname_icon" src="./password.png" alt="">
          <input v-model="username" class="custom_input" type="text" placeholder="请输入管理员姓名">
        </div>

        <div class="input_box1" style="margin-top: 20px;">
          <img class="uname_icon" src="./username.png" alt="">
          <input v-model="password" class="custom_input" type="password" placeholder="请输入登录密码">
        </div>

        <el-checkbox v-model="checked" style="margin-top: 60px;">记住用户名</el-checkbox>

        <el-row>
          <el-button style="margin-top: 30px;width: 250px;height: 45px;" type="primary" round @click="login()">登录</el-button>
        </el-row>

        <p class="buttom_text">copyright © 2018 沈富贵 All rights Reserved</p>
      </div>

    </div>

    <p class="copyInfo">Copyright © 2018-2020 koolearn.com Inc. All rights reserved. 浙江凯强软件有限公司 版权所有</p>
  </div>

</template>

<script>
import VueParticles from 'vue-particles'
import t from './../../utils/request'
import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

Vue.use(VueParticles)

export default {
  name: 'Login',
  components: {
  },
  data() {
    return {
      username: '',
      password: '',
      checked: true
    }
  },
  mounted() {
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
  methods: {
    // 账号密码登录
    login: function() {
      t.toPost('/admin/account/login', {
        username: this.username,
        password: this.password
      }, (res) => {
        console.log(res)
        // 如果登录成功
        if (res.code === '000000') {
          localStorage.setItem('username', res.data.username)
          localStorage.setItem('role', res.data.role)
          localStorage.setItem('uid', res.data.uid)

          this.$router.push('/dashboard/dashboard')
        } else {
          this.$message.error('登录失败账号密码错误！！')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    outline: none;
  }

  ::-webkit-input-placeholder{
    color: #989898;
    font-size: 14px;
  }

  input {
    outline: none;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.particles{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #e1e3e4;
      background-size: cover;
      background-position: 50% 50%;
      background-image: url('http://qny.zhiniugroup.com/blog/20181207144558.png');
      background-color: #1940ff;
      z-index: 99;
  overflow: hidden;

}
.mack_box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  z-index: 9;
  overflow: hidden;
}
.login_box {
  position: relative;
  top: 100px;
  width: 980px;
  height: 600px;
  background: #fff;
  z-index: 99;
  margin: 0px auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 3px 10px rgba(0,0,0,.2);

  .login_title {
    position:relative;
    width:100%;
    height:120px;
    line-height: 120px;
    font-size: 24px;
    color: #343434;
    font-weight: 700;
    text-align: center;
  }

  .input_box {
    position: relative;
    width: 80%;
    margin: 0px auto;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .gaoji {
    position: relative;
    width:100%;
    height:60px;
    line-height: 60px;
    text-align: center;
    color: #409EFF;
    font-size: 14px;
  }

  .input_btn {
    width: 100%;
    height: 45px;
  }
  .left_t {
    float: left;
    font-size: 14px;
    color: #787878;
    cursor: pointer;
  }
  .right_t {
    float: right;
    color: #787878;
    font-size: 14px;
    cursor: pointer;
  }
}

.copyInfo {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  z-index: 999;
  color: #FFFFFF;
}

  .login_text {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .login_img {
    position: relative;
    top: 200px;
    left: 100px;
    width: 350px;
  }

  .login_main {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 450px;
    height: 600px;
    /*border: 1px solid #000;*/
  }

  .main_text1 {
    position: relative;
    top: 50px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 34px;
    color: #363636;
    font-weight: 400;
    letter-spacing: -1px;
  }
  .main_text2 {
    position: relative;
    top: 20px;
    font-size: 14px;
    color: #989898;
  }
  .input_box1 {
    position: relative;
    top: 40px;
    width: 280px;
    height: 50px;
    border-bottom: 1px solid #e1e3e4;
  }

  .uname_icon {
    position: absolute;
    top: 10px;
    left: 4px;
    width: 25px;
    height: 25px;
  }

  .custom_input {
    position: absolute;
    top: 12px;
    left: 50px;
    border: none;
    letter-spacing: 2px;
  }

  .buttom_text {
    position: absolute;
    bottom: 5px;
    color: #989898;
    font-size: 12px;
  }

</style>
